<script setup>

import { reactive } from "@vue/reactivity";
import { post } from '../utils'
import { ElMessage } from "element-plus";

let listData = reactive({
    list: [],
    dialogVisible: false,
    sysResId: 0,
});
function showList(sysResId) {
    listData.loading = true;
    listData.sysResId = sysResId;
    post('/api/SysSetting/GetSysApiList', { sysResId })
        .then(function (res) {
            res.result.list.forEach(item => {
                item.has = res.result.apiIds.findIndex(x => x == item.id) > -1;
                if (item.has) {
                    console.log(item);
                }
            });
            listData.list = res.result.list;
            listData.dialogVisible = true;
        })
}
function setApis() {
    let apiIds = [];
    listData.list.forEach(item => {
        if (item.has) {
            apiIds.push(item.id);
        }
    })
    post('/api/SysSetting/SetSysResApis', { SysResId: listData.sysResId, apiIds }).then((res) => {
        // console.log("编辑结果", res);
        ElMessage.success(res.msg);
        if (res.success) {
            listData.dialogVisible = false
        }
    })
}


defineExpose({
    showList,
});

</script>

<template>
    <el-dialog title="API列表" v-model="listData.dialogVisible" width="60%">
        <el-table
            :data="listData.list"
            :border="true"
            height="500"
            style="width: 100%;margin-top: 0;"
        >
            <el-table-column prop="tag" label="标签" width="100px"></el-table-column>
            <!-- <el-table-column prop="method" label="方法"></el-table-column> -->
            <el-table-column label="路径">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.method == 'Post' ? '' : 'success'"
                    >{{ scope.row.method }}</el-tag>
                    <span class="mx-1">{{ scope.row.path }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="summary" label="描述"></el-table-column>
            <el-table-column label="选中" width="100px">
                <template #default="scope">
                    <el-switch v-model="scope.row.has" active-color="red" />
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="listData.dialogVisible = false">关 闭</el-button>
                <el-button type="primary" @click="setApis">保 存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
